<template>
    <div>

        <el-table border :data="skuList">
            <el-table-column label="序号" width="100" type="index" align="center" />
            <el-table-column label="名称" width="180" prop="skuName" />
            <el-table-column label="描述" prop="skuDesc" />
            <el-table-column label="默认图片">
                <template v-slot="{ row, $index }">
                    <el-image :src="row.skuDefaultImg" style="width:100px;height:60px"></el-image>
                </template>
            </el-table-column>
            <el-table-column label="重量" prop="weight" />
            <el-table-column label="价格" prop="price" />
            <el-table-column label="操作" width="250" align="center">
                <template #default="{ row, $index }">
                    <el-button size="small" v-if="row.isSale" type="info" :icon="Top" @click="cancelSale(row)"
                        title="下架"> </el-button>
                    <el-button size="small" v-else type="success" :icon="Bottom" @click="onSale(row)" title="上架">
                    </el-button>
                    <el-button size="small" type="warning" :icon="Edit" title="修改" @click="updateSku(row)"></el-button>
                    <el-button size="small" type="info" :icon="InfoFilled" title="查看详情" @click="showSkuInfo(row)">
                    </el-button>
                    <el-popconfirm :title="`确认删除【${row.skuName}】吗？`" @confirm="deleteSku(row)">
                        <template #reference>
                            <el-button size="small" type="danger" :icon="Delete"></el-button>
                        </template>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>


        <el-pagination v-model:currentPage="page" v-model:page-size="limit" layout="prev, pager, next, jumper"
            :total="total" @current-change="getPage" />


        <!-- 抽屉 -->
        <el-drawer v-model="drawer" :with-header="false" size="50%">
            <el-row>
                <el-col :span="5">名称</el-col>
                <el-col :span="16">{{  skuInfo?.skuName  }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="5">描述</el-col>
                <el-col :span="16">{{  skuInfo?.skuDesc  }}</el-col>
            </el-row>
            <el-row>
                <el-col :span="5">价格</el-col>
                <el-col :span="16">{{  skuInfo?.price  }}</el-col>
            </el-row>

            <el-row>
                <el-col :span="5">平台属性</el-col>
                <el-col :span="18">
                    <div v-if="skuInfo?.skuAttrValueList && skuInfo?.skuAttrValueList.length > 0">
                        <el-tag type="success" style="margin-right: 5px" v-for="value in skuInfo?.skuAttrValueList"
                            :key="value.id">
                            {{  value.attrName + '-' + value.valueName  }}
                        </el-tag>
                    </div>
                    <div v-else>无</div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="5">销售属性</el-col>
                <el-col :span="18">
                    <el-tag type="success" style="margin-right: 5px" v-for="value in skuInfo.skuSaleAttrValueList"
                        :key="value.id">
                        {{  value.saleAttrName + '-' + value.saleAttrValueName  }}
                    </el-tag>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="5">商品图片</el-col>
                <el-col :span="16">

                    <!-- 轮播图  走马灯-->
                    <!-- 指示器的触发方式  trigger-->
                    <el-carousel class="sku-carousel" trigger="click" height="400px" style="width: 400px">
                        <el-carousel-item v-for="item in skuInfo?.skuImageList" :key="item.id">
                            <el-image :src="item.imgUrl" style="width: 100%;height: 100%;"></el-image>
                        </el-carousel-item>
                    </el-carousel>
                </el-col>
            </el-row>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import { Delete, Edit, InfoFilled, Top, Bottom } from '@element-plus/icons-vue'
import skuApi, { type SkuModel } from "@/api/sku";
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
const page = ref(1);
const limit = ref(5);
const total = ref(0)
const skuList = ref<SkuModel[]>([])
//获取分页信息
const getPage = async () => {
    try {
        let result = await skuApi.getPage(page.value, limit.value);
        // console.log(result);
        skuList.value = result.records;
        total.value = result.total;
        ElMessage.success("获取skuList成功");
    } catch (err) {
        console.log(err);
        ElMessage.error("获取skuList失败")
    }
}
onMounted(() => {
    getPage();
});

//四个按钮的功能
//1-上线 与下线
const cancelSale = async (row: SkuModel) => {
    // console.log(row)
    try {
        await skuApi.cancelSale(row.id as number);
        getPage();
        ElMessage.error("下架成功")
    } catch (err) {
        console.log(err);
        ElMessage.error("下架失败")
    }
}
const onSale = async (row: SkuModel) => {
    try {
        await skuApi.onSale(row.id as number);
        getPage();
        ElMessage.error("上架成功")
    } catch (err) {
        console.log(err);
        ElMessage.error("上架失败")
    }
}
const updateSku = (row: SkuModel) => {
    ElMessage.success('正在开发中！！！！')
}
const deleteSku = async (row: SkuModel) => {
    try {
        await skuApi.delete(row.id as number);
        getPage();
        ElMessage.error("删除成功")
    } catch (err) {
        console.log(err);
        ElMessage.error("删除失败")
    }
}

//查看详情
const initSkuForm = (): SkuModel => ({
    spuId: undefined,
    tmId: undefined,
    skuName: '',
    price: undefined,
    skuDesc: '',
    weight: '',
    category3Id: undefined,
    skuDefaultImg: '',
    createTime: '',
    skuImageList: [],
    skuAttrValueList: [],
    skuSaleAttrValueList: []
});
const skuInfo = ref<SkuModel>(initSkuForm());
const drawer = ref(false);
const showSkuInfo = async (row: SkuModel) => {
    drawer.value = true;
    skuInfo.value = await skuApi.getSkuInfo(row.id as number)
}
</script>

<style scoped lang="scss">
   .el-row{
  height: 40px;
  line-height: 40px;
  .el-col{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .el-col-5{
    font-size: 20px;
    font-weight: bolder;
    text-align: right;
    margin-right: 20px;
  }
}

 ::v-deep(.el-carousel__button) {
    width: 20px;
    height: 20px;
    background-color: skyblue;
    border-radius: 50%;
}
</style>